<template>
    <div class="customer-page" style="margin-left: 15px; margin-top: 15px;">
        <!-- 搜索条件 -->
        <el-form :inline="true" :model="keyword" label-width="100px">
            <el-form-item label="房屋编号">
                <el-input v-model="keyword.houseId" placeholder="请输入房屋编号进行搜索"></el-input>
            </el-form-item>
            <el-form-item style="margin-left: 30px;">
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="danger" icon="el-icon-delete" @click="handleDleteBatch">批量删除</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" plain size="primary" @click="resetSearchForm('searchForm')"
                    icon="el-icon-refresh">重置</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" plain size="primary" @click="downloadExcel"
                    icon="el-icon-download">导出</el-button>
            </el-form-item>
        </el-form>

        <!-- 数据表格 -->
        <el-table :data="tableData" tooltip-effect="dark" class="billing-table"
            @selection-change="handleSelectionChange" width="100%">
            <el-table-column type="selection" width="50"></el-table-column>
            <el-table-column label="序号" width="150">
                <template #default="scope">
                    {{ scope.$index + 1 + (currentPage - 1) * pageSize }}
                </template>
            </el-table-column>
            <!-- <el-table-column prop="id" label="编号" width="150"></el-table-column> -->
            <el-table-column prop="houseId" label="房屋编号" width="150"></el-table-column>
            <el-table-column prop="ownerName" label="业主名称" width="150"></el-table-column>
            <el-table-column prop="contactNumber" label="联系电话" width="200"></el-table-column>
            <el-table-column prop="billingDate" label="收费日期" width="200"></el-table-column>
            <el-table-column prop="paymentAmount" label="缴费金额" width="200"></el-table-column>
            <el-table-column prop="paymentStatus" label="缴费状态" width="200"></el-table-column>
            <el-table-column label="操作" width="200">
                <template #default="scope">
                    <el-button type="primary" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="total" class="pagination">
        </el-pagination>

        <!-- 编辑弹窗 -->
        <el-dialog title="编辑客户" :visible.sync="editDialogVisible" width="50%">
            <el-form ref="editForm" :model="editForm" label-width="100px">
                <el-form-item label="房屋编号">
                    <el-input v-model="editForm.houseId" placeholder="房屋编号" :disabled="true">
                    </el-input>
                </el-form-item>
                <el-form-item label="业主名称">
                    <el-input v-model="editForm.ownerName" placeholder="业主名称" :disabled="true">
                    </el-input>
                </el-form-item>
                <el-form-item label="联系电话">
                    <el-input v-model="editForm.contactNumber" placeholder="联系人电话" :disabled="true">
                    </el-input>
                </el-form-item>
                <el-form-item label="收费日期">
                    <el-date-picker v-model="editForm.billingDate" type="date" value-format="yyyy-MM-dd"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="缴费金额">
                    <el-input v-model="editForm.paymentAmount" placeholder="缴费金额">
                    </el-input>
                </el-form-item>
                <el-form-item label="缴费状态">
                    <el-input v-model="editForm.paymentStatus" placeholder="缴费状态">
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="editFormSubmit">确定</el-button>
                    <el-button type="default" @click="editDialogVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { getBillingList, deleteBilling, deleteBatch, editBilling, downloadExcel } from '@/api/psm/billingManagement'

export default {
    name: 'Clue',
    data() {
        return {
            // 数据表单信息
            tableData: [],
            currentPage: 1,
            pageNum: 1,
            pageSize: 10,
            total: 0,
            // 搜索条件
            keyword: {
                houseId: ''
            },
            // 批量删除
            ids: [],
            // 编辑弹窗
            editDialogVisible: false,
            editForm: {
                houseId: '',
                ownerName: '',
                contactNumber: '',
                billingDate: '',
                paymentAmount: '',
                paymentStatus: ''
            },

        }
    },

    created() {
        this.fetchData()
    },

    methods: {
        // 初始化数据
        fetchData() {
            // 传入搜索条件
            let params = {
                pageNum: this.currentPage,
                pageSize: this.pageSize,
                houseId: this.keyword.houseId
            }
            // 获取列表数据
            getBillingList(params).then(response => {
                console.log("getBillingList, response", response)
                this.tableData = response.data.list
                this.total = response.data.total
            })
        },

        // 删除的选中行
        handleSelectionChange(selectionRowArray) {
            this.ids = [];
            for (let i = 0; i < selectionRowArray.length; i++) {
                this.ids.push(selectionRowArray[i].id)
            }
        },

        // 批量删除
        handleDleteBatch() {
            this.$confirm('确定删除选中的[' + this.ids + ']条客户吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteBatch(this.ids).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.currentPage = 1;
                    this.fetchData()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },

        // 打开编辑弹窗
        handleEdit(index, row) {
            // 传递本行数据给编辑弹窗
            this.editForm = JSON.parse(JSON.stringify(row));
            this.editDialogVisible = true
        },

        // 编辑弹窗提交
        editFormSubmit() {
            console.log("编辑, editForm", this.editForm)
            editBilling(this.editForm).then(res => {
                console.log("编辑, res", res)
                this.$message({
                    type: 'success',
                    message: '编辑成功!'
                });
                this.editDialogVisible = false
                this.fetchData()
            }).catch(err => {
                this.$message({
                    type: 'error',
                    message: '编辑失败!'
                })
            })
        },

        // 页面大小变化
        handleSizeChange(val) {
            this.pageSize = val
            this.fetchData()
        },

        // 页码变化
        handleCurrentChange(val) {
            this.currentPage = val
            this.fetchData()
        },

        // 搜索
        handleSearch() {
            this.fetchData()
        },
        // 删除
        handleDelete(index, row) {
            console.log("准备删除, row.id", row.id);
            this.$confirm('确定删除编号为 ' + row.id + ' 的客户吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteBilling(row.id)
                    .then(() => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        // 确保重新获取数据
                        this.currentPage = 1;
                        this.fetchData();
                    })
                    .catch(error => {
                        console.error("删除失败", error);
                        this.$message({
                            type: 'error',
                            message: '删除失败, 请重试!'
                        });
                    });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },

        // 重置
        resetSearchForm() {
            this.keyword = {
                houseId: ''
            }
            this.currentPage = 1;
            this.fetchData()
        },
        // 导出excel文件
        downloadExcel() {
            this.$confirm('确定要导出数据吗?', '信息', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                window.location.href = "http://localhost:8081/billingManagement/propertyBilling/download/excel"
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消导出数据！'
                })
            })
        },

    }
}
</script>

<style scoped>
.customer-page {
    margin: 15px 30px;
}

.billing-table {
    width: 100%;
}

.el-table-column {
    text-align: center;
    /* 使表格列内容居中 */
}
</style>